<template>
  <div :id="idName" class="donut-content" />
</template>

<script>
export default {
  name: 'Index',
  props: {
    idName: {
      type: String,
      default: ''
    },
    xData: {
      type: Array,
      default: () => {
        return []
      }
    },
    legendColor: {
      type: Array,
      default: () => {
        return []
      }
    },
    count: {
      type: Number,
      default: 0
    },
  },
  watch: {
    count() {
      this.initEcharts()
    }
  },
  data() {
    return {
      myChart: {},
      chartNum: 0
    }
  },
  mounted() {
    this.initEcharts()
  },
  methods: {
    initEcharts() {
      const option = {
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          right: '10%',
          top: 'center',
          align: 'left',
          icon: 'circle',
          itemGap: 25,
          textStyle: {
            fontSize: 14,
            color: '#000000',
            // 调整图例文字对齐
            padding: [0, -10, -4, -4]
          },
          // 自定义图例
          // 图例后添加数值
          formatter: function(name) {
            let tarValue
            const dataLegend = option.series[1].data
            for (let i = 0; i < dataLegend.length; i++) {
              if (dataLegend[i].name === name) {
                tarValue = dataLegend[i].value
              }
            }
            return name + '   ' + tarValue
          }
        },
        graphic: [ // 为环形图中间添加文字
          {
            type: 'text',
            left: 'center',
            top: '45%',
            style: {
              text: this.count,
              textAlign: 'center',
              fill: '#000000',
              fontSize: 18
            }
          },
          {
            type: 'text',
            left: 'center',
            top: '55%',
            style: {
              text: '总数',
              textAlign: 'center',
              fill: '#999999',
              fontSize: 14
            }
          }
        ],
        color: this.legendColor,
        series: [
          // 外环灰色背景
          {
            name: '',
            type: 'pie',
            silent: true,
            label: {
              normal: {
                show: false
              }
            },
            radius: ['30%', '80%'], // 半径
            color: '#E4EAF5',
            data: [{ value: 100, name: '' }]
          },
          // 数据环
          {
            name: '电站状态',
            type: 'pie',
            radius: ['38%', '65%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: false,
                fontSize: '20',
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: this.xData
          }

        ]
      }
      this.myChart = this.$echarts.init(document.getElementById(this.idName))
      this.myChart.setOption(option)
      // 随着屏幕大小调节图表
      window.addEventListener('resize', () => {
        this.myChart.resize()
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.donut-content {
  width: 100%;
  height: 240px
}
</style>
